/**
 * 科技风全局主题样式
 * 覆盖 Element UI 默认样式
 * 时间上下文: 2025年
 */

/* ==================== CSS 变量定义 ==================== */
:root {
	--tech-primary: #00f0ff;
	--tech-success: #00ff88;
	--tech-warning: #ffaa00;
	--tech-error: #ff4757;
	--tech-info: #7f8ea3;

	--tech-bg-dark: #0a0e27;
	--tech-bg-card: rgba(26, 31, 58, 0.6);
	--tech-bg-input: rgba(10, 14, 39, 0.6);

	--tech-text-primary: #e0e6ed;
	--tech-text-secondary: #7f8ea3;
	--tech-text-placeholder: #4a5568;

	--tech-border: rgba(0, 240, 255, 0.3);
	--tech-border-hover: rgba(0, 240, 255, 0.5);
	--tech-border-focus: #00f0ff;

	--tech-shadow-glow: 0 0 20px rgba(0, 240, 255, 0.4);
	--tech-shadow-sm: 0 4px 15px rgba(0, 240, 255, 0.2);
	--tech-shadow-md: 0 8px 32px rgba(0, 240, 255, 0.3);
}

/* ==================== Element UI 输入框 ==================== */
.el-input__inner {
	background: var(--tech-bg-input) !important;
	border: 1px solid var(--tech-border) !important;
	color: var(--tech-text-primary) !important;
	border-radius: 6px !important;
	height: 36px !important;
	line-height: 36px !important;
	font-size: 13px !important;
	transition: all 0.3s ease !important;
}

.el-input__inner:hover {
	border-color: var(--tech-border-hover) !important;
}

.el-input__inner:focus {
	border-color: var(--tech-border-focus) !important;
	box-shadow: var(--tech-shadow-glow) !important;
	background: rgba(10, 14, 39, 0.8) !important;
}

.el-input__inner::placeholder {
	color: var(--tech-text-placeholder) !important;
}

.el-input.is-disabled .el-input__inner {
	background: rgba(10, 14, 39, 0.3) !important;
	border-color: rgba(0, 240, 255, 0.1) !important;
	color: var(--tech-text-secondary) !important;
	cursor: not-allowed;
}

/* 输入框图标 */
.el-input__icon {
	color: var(--tech-text-secondary) !important;
	transition: color 0.3s ease;
}

.el-input:hover .el-input__icon {
	color: var(--tech-primary) !important;
}

/* ==================== Element UI 下拉框 ==================== */
.el-select .el-input__inner {
	background: var(--tech-bg-input) !important;
	border: 1px solid var(--tech-border) !important;
	color: var(--tech-text-primary) !important;
}

.el-select:hover .el-input__inner {
	border-color: var(--tech-border-hover) !important;
}

.el-select .el-input.is-focus .el-input__inner {
	border-color: var(--tech-border-focus) !important;
	box-shadow: var(--tech-shadow-glow) !important;
}

/* 下拉箭头 */
.el-select .el-input__suffix {
	color: var(--tech-text-secondary) !important;
}

.el-select:hover .el-input__suffix {
	color: var(--tech-primary) !important;
}

/* 下拉面板 */
.el-select-dropdown {
	background: rgba(26, 31, 58, 0.95) !important;
	border: 1px solid var(--tech-border) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
	backdrop-filter: blur(10px);
}

.el-select-dropdown__item {
	color: var(--tech-text-primary) !important;
	background: transparent !important;
	padding: 8px 16px !important;
	font-size: 13px !important;
	transition: all 0.3s ease;
}

.el-select-dropdown__item:hover {
	background: rgba(0, 240, 255, 0.2) !important;
	color: var(--tech-primary) !important;
}

.el-select-dropdown__item.selected {
	color: var(--tech-primary) !important;
	font-weight: 600;
	background: rgba(0, 240, 255, 0.1) !important;
}

.el-select-dropdown__item.is-disabled {
	color: var(--tech-text-secondary) !important;
	cursor: not-allowed;
	opacity: 0.5;
}

/* ==================== Element UI 按钮 ==================== */
.el-button {
	border-radius: 6px !important;
	font-size: 13px !important;
	padding: 8px 20px !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px;
	transition: all 0.3s ease !important;
	position: relative;
	overflow: hidden;
}

/* 主要按钮 */
.el-button--primary {
	background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%) !important;
	border: none !important;
	color: #0a0e27 !important;
	box-shadow: var(--tech-shadow-sm);
}

.el-button--primary:hover {
	/* 动画已移除，保留基础样式 */
}

.el-button--primary:active {
	transform: translateY(0);
}

/* 成功按钮 */
.el-button--success {
	background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
	border: none !important;
	color: #0a0e27 !important;
	box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3);
}

.el-button--success:hover {
	/* 动画已移除，保留基础样式 */
}

/* 警告按钮 */
.el-button--warning {
	background: linear-gradient(135deg, #ffaa00 0%, #ff8800 100%) !important;
	border: none !important;
	color: #0a0e27 !important;
	box-shadow: 0 4px 15px rgba(255, 170, 0, 0.3);
}

.el-button--warning:hover {
	/* 动画已移除，保留基础样式 */
}

/* 危险按钮 */
.el-button--danger {
	background: linear-gradient(135deg, #ff4757 0%, #ff2f3f 100%) !important;
	border: none !important;
	color: #fff !important;
	box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
}

.el-button--danger:hover {
	/* 动画已移除，保留基础样式 */
}

/* 信息按钮 */
.el-button--info {
	background: linear-gradient(135deg, #7f8ea3 0%, #5a6b7f 100%) !important;
	border: none !important;
	color: #fff !important;
	box-shadow: 0 4px 15px rgba(127, 142, 163, 0.3);
}

.el-button--info:hover {
	/* 动画已移除，保留基础样式 */
}

/* 文字按钮 */
.el-button--text {
	color: var(--tech-primary) !important;
	font-weight: 600 !important;
	padding: 8px 16px !important;
}

.el-button--text:hover {
	color: var(--tech-success) !important;
	background: rgba(0, 240, 255, 0.1) !important;
}

/* 禁用状态 */
.el-button.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==================== Element UI 表格 ==================== */
.el-table {
	background: transparent !important;
	color: var(--tech-text-primary) !important;
}

.el-table::before {
	background: transparent !important;
}

.el-table th,
.el-table tr {
	background: transparent !important;
}

.el-table th {
	background: rgba(26, 31, 58, 0.8) !important;
	color: var(--tech-primary) !important;
	font-weight: bold !important;
	border-bottom: 1px solid var(--tech-border) !important;
}

.el-table td {
	border-bottom: 1px solid rgba(0, 240, 255, 0.1) !important;
	color: var(--tech-text-primary) !important;
}

.el-table__body tr {
	background: rgba(10, 14, 39, 0.3) !important;
	transition: all 0.3s ease;
}

.el-table__body tr:hover {
	background: rgba(0, 240, 255, 0.1) !important;
}

.el-table__body tr.current-row {
	background: rgba(0, 240, 255, 0.15) !important;
}

/* 表格空数据 */
.el-table__empty-text {
	color: var(--tech-text-secondary) !important;
}

/* 表格滚动条 */
.el-table__body-wrapper {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 240, 255, 0.3) rgba(10, 14, 39, 0.5);
}

.el-table__body-wrapper::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.el-table__body-wrapper::-webkit-scrollbar-track {
	background: rgba(10, 14, 39, 0.5);
	border-radius: 4px;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
	background: rgba(0, 240, 255, 0.3);
	border-radius: 4px;
	transition: background 0.3s;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 240, 255, 0.5);
}

/* ==================== Element UI 分页（增强版）==================== */
/* 分页容器 */
.el-pagination {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 0 !important;
}

/* 翻页按钮基础样式 */
.el-pagination .btn-prev,
.el-pagination .btn-next {
	background: rgba(15, 20, 40, 0.6) !important;
	border: 1px solid rgba(0, 212, 255, 0.3) !important;
	color: #00d4ff !important;
	border-radius: 8px !important;
	width: 36px !important;
	height: 32px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	min-height: 32px !important;
	max-height: 32px !important;
	padding: 0 !important;
	margin: 0 4px !important;
	line-height: 32px !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-weight: 600;
	position: relative;
	overflow: hidden;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}

/* 翻页按钮图标优化 */
.el-pagination .btn-prev .el-icon,
.el-pagination .btn-next .el-icon {
	font-size: 13px;
	font-weight: bold;
	line-height: 1;
	display: inline-block;
}

/* 上一页按钮特殊样式 */
.btn-prev {
	position: relative;
}

.btn-prev .el-icon-arrow-left::before {
	content: "◀";
	font-style: normal;
}

/* 下一页按钮特殊样式 */
.btn-next {
	position: relative;
}

.btn-next .el-icon-arrow-right::before {
	content: "▶";
	font-style: normal;
}

/* 翻页按钮悬浮效果 */
.el-pagination .btn-prev:not(:disabled):hover,
.el-pagination .btn-next:not(:disabled):hover {
	background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 132, 255, 0.2) 100%) !important;
	border-color: #00d4ff !important;
	color: #fff !important;
	box-shadow: 0 0 15px rgba(0, 212, 255, 0.5), inset 0 0 10px rgba(0, 212, 255, 0.1);
	transform: translateY(-2px);
}

/* 翻页按钮悬浮时箭头动画 */
.el-pagination .btn-prev:not(:disabled):hover .el-icon {
	animation: arrowLeftMove 0.6s ease-in-out infinite;
}

.el-pagination .btn-next:not(:disabled):hover .el-icon {
	animation: arrowRightMove 0.6s ease-in-out infinite;
}

@keyframes arrowLeftMove {
	0%, 100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(-3px);
	}
}

@keyframes arrowRightMove {
	0%, 100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(3px);
	}
}

/* 翻页按钮禁用状态 */
.el-pagination .btn-prev:disabled,
.el-pagination .btn-next:disabled {
	background: rgba(15, 20, 40, 0.3) !important;
	border-color: rgba(0, 212, 255, 0.1) !important;
	color: rgba(255, 255, 255, 0.3) !important;
	cursor: not-allowed !important;
	opacity: 0.5;
}

/* 页码按钮 */
.el-pagination .el-pager li {
	background: rgba(15, 20, 40, 0.6) !important;
	border: 1px solid rgba(0, 212, 255, 0.2) !important;
	color: #fff !important;
	border-radius: 8px;
	min-width: 36px;
	height: 32px;
	line-height: 30px;
	transition: all 0.3s ease;
	font-weight: 500;
	margin: 0 4px;
}

.el-pager li:hover {
	color: #00d4ff !important;
	border-color: #00d4ff !important;
	background: rgba(0, 212, 255, 0.15) !important;
	box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
	transform: translateY(-2px);
}

/* 当前激活页码 */
.el-pager li.active {
	background: linear-gradient(135deg, #00d4ff 0%, #0084ff 100%) !important;
	border-color: #00d4ff !important;
	color: #fff !important;
	box-shadow: 0 0 20px rgba(0, 212, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	font-weight: 700;
	transform: scale(1.05);
}

/* 总数和跳转文字 */
.el-pagination__total,
.el-pagination__jump {
	color: rgba(255, 255, 255, 0.8) !important;
	font-weight: 500;
}

/* 每页条数选择器 */
.el-pagination__sizes {
	margin-right: 15px;
}

.el-pagination__sizes .el-input__inner {
	background: rgba(15, 20, 40, 0.6) !important;
	border: 1px solid rgba(0, 212, 255, 0.3) !important;
	color: #fff !important;
	border-radius: 8px;
	transition: all 0.3s ease;
}

.el-pagination__sizes .el-input__inner:hover {
	border-color: #00d4ff !important;
	box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.el-pagination__sizes .el-input__inner:focus {
	border-color: #00d4ff !important;
	box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
}

/* 跳转输入框 */
.el-pagination__jump .el-input__inner {
	background: rgba(15, 20, 40, 0.6) !important;
	border: 1px solid rgba(0, 212, 255, 0.3) !important;
	color: #fff !important;
	border-radius: 8px;
}

.el-pagination__jump .el-input__inner:hover,
.el-pagination__jump .el-input__inner:focus {
	border-color: #00d4ff !important;
	box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

/* ==================== Element UI 对话框 ==================== */
.el-dialog {
	background: rgba(26, 31, 58, 0.95) !important;
	border: 1px solid var(--tech-border) !important;
	border-radius: 12px !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
	backdrop-filter: blur(20px);
}

.el-dialog__header {
	border-bottom: 1px solid rgba(0, 240, 255, 0.2) !important;
	padding: 16px 20px !important;
}

.el-dialog__title {
	color: var(--tech-primary) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.el-dialog__headerbtn .el-dialog__close {
	color: var(--tech-text-secondary) !important;
	font-size: 18px;
	transition: all 0.3s ease;
}

.el-dialog__headerbtn:hover .el-dialog__close {
	color: var(--tech-error) !important;
}

.el-dialog__body {
	color: var(--tech-text-primary) !important;
	padding: 20px !important;
}

.el-dialog__footer {
	border-top: 1px solid rgba(0, 240, 255, 0.1) !important;
	padding: 16px 20px !important;
}

/* 对话框遮罩 */
.el-dialog__wrapper {
	backdrop-filter: blur(5px);
}

.v-modal {
	background: rgba(10, 14, 39, 0.8) !important;
}

/* ==================== Element UI 消息提示 ==================== */
.el-message {
	background: rgba(26, 31, 58, 0.95) !important;
	border: 1px solid var(--tech-border) !important;
	border-radius: 8px !important;
	box-shadow: var(--tech-shadow-md) !important;
	backdrop-filter: blur(10px);
	padding: 12px 16px !important;
}

.el-message__content {
	color: var(--tech-text-primary) !important;
	font-size: 13px;
}

.el-message--success {
	border-color: rgba(0, 255, 136, 0.4) !important;
	box-shadow: 0 8px 32px rgba(0, 255, 136, 0.3) !important;
}

.el-message--warning {
	border-color: rgba(255, 170, 0, 0.4) !important;
	box-shadow: 0 8px 32px rgba(255, 170, 0, 0.3) !important;
}

.el-message--error {
	border-color: rgba(255, 71, 87, 0.4) !important;
	box-shadow: 0 8px 32px rgba(255, 71, 87, 0.3) !important;
}

.el-message--info {
	border-color: var(--tech-border) !important;
}

/* ==================== Element UI 表单 ==================== */
.el-form-item__label {
	color: var(--tech-text-secondary) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
}

.el-form-item__error {
	color: var(--tech-error) !important;
	font-size: 12px !important;
}

/* ==================== Element UI 复选框 ==================== */
.el-checkbox__inner {
	background: var(--tech-bg-input) !important;
	border-color: var(--tech-border) !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
	background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%) !important;
	border-color: transparent !important;
}

.el-checkbox__label {
	color: var(--tech-text-primary) !important;
	font-size: 13px !important;
}

/* ==================== Element UI 单选框 ==================== */
.el-radio__inner {
	background: var(--tech-bg-input) !important;
	border-color: var(--tech-border) !important;
}

.el-radio__input.is-checked .el-radio__inner {
	background: var(--tech-primary) !important;
	border-color: var(--tech-primary) !important;
}

.el-radio__label {
	color: var(--tech-text-primary) !important;
	font-size: 13px !important;
}

/* ==================== Element UI 开关 ==================== */
.el-switch__core {
	background: rgba(127, 142, 163, 0.5) !important;
	border: 1px solid var(--tech-border) !important;
}

.el-switch.is-checked .el-switch__core {
	background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%) !important;
	border-color: transparent !important;
}

/* ==================== Element UI 标签页 ==================== */
.el-tabs__header {
	background: transparent !important;
	border-bottom: 1px solid var(--tech-border) !important;
}

.el-tabs__item {
	color: var(--tech-text-secondary) !important;
	font-size: 14px !important;
	padding: 12px 20px !important;
	transition: all 0.3s ease;
}

.el-tabs__item:hover {
	color: var(--tech-primary) !important;
}

.el-tabs__item.is-active {
	color: var(--tech-primary) !important;
	font-weight: 600;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.el-tabs__active-bar {
	background: linear-gradient(90deg, #00f0ff 0%, #0099cc 100%) !important;
	height: 3px !important;
	box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

/* ==================== Element UI 加载 ==================== */
.el-loading-mask {
	background: rgba(10, 14, 39, 0.8) !important;
	backdrop-filter: blur(5px);
}

.el-loading-spinner .circular {
	stroke: var(--tech-primary) !important;
	filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5));
}

.el-loading-text {
	color: var(--tech-primary) !important;
	font-size: 14px !important;
}

/* ==================== Element UI 提示框 ==================== */
.el-tooltip__popper {
	background: rgba(26, 31, 58, 0.95) !important;
	border: 1px solid var(--tech-border) !important;
	color: var(--tech-text-primary) !important;
	box-shadow: var(--tech-shadow-md) !important;
	backdrop-filter: blur(10px);
}

.el-tooltip__popper[x-placement^="top"] .popper__arrow::after {
	border-top-color: rgba(26, 31, 58, 0.95) !important;
}

/* ==================== Element UI 日期选择器 ==================== */
.el-date-picker {
	background: rgba(26, 31, 58, 0.95) !important;
	border: 1px solid var(--tech-border) !important;
	box-shadow: var(--tech-shadow-md) !important;
}

.el-date-table td.today span {
	color: var(--tech-primary) !important;
	font-weight: bold;
}

.el-date-table td.current:not(.disabled) span {
	background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%) !important;
	color: #0a0e27 !important;
}

/* ==================== Element UI 下拉菜单 ==================== */
.el-dropdown-menu {
	background: rgba(26, 31, 58, 0.95) !important;
	border: 1px solid var(--tech-border) !important;
	box-shadow: var(--tech-shadow-md) !important;
	backdrop-filter: blur(10px);
}

.el-dropdown-menu__item {
	color: var(--tech-text-primary) !important;
	font-size: 13px !important;
	transition: all 0.3s ease;
}

.el-dropdown-menu__item:hover {
	background: rgba(0, 240, 255, 0.2) !important;
	color: var(--tech-primary) !important;
}

/* ==================== Element UI 卡片 ==================== */
.el-card {
	background: var(--tech-bg-card) !important;
	border: 1px solid var(--tech-border) !important;
	border-radius: 12px !important;
	box-shadow: var(--tech-shadow-sm) !important;
	backdrop-filter: blur(10px);
}

.el-card__header {
	background: rgba(26, 31, 58, 0.5) !important;
	border-bottom: 1px solid rgba(0, 240, 255, 0.2) !important;
	color: var(--tech-primary) !important;
	font-weight: 600;
}

.el-card__body {
	color: var(--tech-text-primary) !important;
}

/* ==================== 全局滚动条 ==================== */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: rgba(10, 14, 39, 0.5);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb {
	background: rgba(0, 240, 255, 0.3);
	border-radius: 4px;
	transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 240, 255, 0.5);
}

/* ==================== 响应式调整 ==================== */
@media (max-width: 768px) {
	.el-button {
		padding: 8px 16px !important;
		font-size: 12px !important;
	}

	.el-input__inner {
		font-size: 12px !important;
	}

	.el-dialog {
		width: 90% !important;
		margin-top: 10vh !important;
	}
}
